<!-- INTERACTIVE TOOLS交互式工具模块 -->
<template>
    <div class="component component--module text__block" v-if="props.onMarketTool.length > 0">
        <div class="column column--primary">
            <div class="element element--textblock contained">
                <h3>INTERACTIVE TOOLS</h3>
                <p>
                    <router-link to=''>Rising</router-link>
                    |
                    <router-link to=''>Falling</router-link> active stocks<br>
                    <router-link to=''>After-hours winners, losers</router-link> |
                    <router-link to=''>Premarket</router-link><br>
                    <router-link to=''>Stock screener</router-link>
                </p>
                <hr>
                <h3>DATA ON THE MARKETS</h3>
                <p>
                    <template v-for="(v, i) in props.onMarketTool" :key="i">
                        <router-link to="">{{ v }}</router-link>
                        <br v-if="i === 0 || i === 3 || i === 4 || i === 5 || i === 6">
                        <span v-if="i === 1 || i === 2"> | </span>
                    </template>

                </p>
            </div>
        </div>
    </div>
    <div class="component component--module text__block" v-if="props.toolData.h2">
        <div class="column column--primary">
            <div class="element element--textblock contained">
                <h3><span v-if="props.toolData.isshow">📨 </span>{{ props.toolData.h2 }}</h3>
                <p>{{ props.toolData.cont }}</p>
                <h4><router-link to=''>Sign Up</router-link> ➜</h4>
            </div>
        </div>
    </div>
</template>
<script setup>
const props = defineProps(['toolData', 'onMarketTool'])
</script>
<style scoped lang='scss'></style>